<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
		<link rel="stylesheet" type="text/css" href="css/Login.css"/>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
	</head>
	<body>
		<header>
			<div>选择语言</div>
			<div>
				<img src="logimg/icon.png" >
				需要帮助
			</div>
		</header>
		<div class="nr">
			<div>
				<img src="logimg/logo.png" >
				让每个人都能享受科技的乐趣
			</div>
		</div>
		<form id="login" v-cloak action="" method="">
			<a id="a">小米账号登录</a>
			<div class="wbk" :class="{wbkl:y,wbkr:y2}">
				<input type="text" v-model="yhm" @focus="bs()" @keyup.enter="Login()" @input="bx()" @blur="yz()" placeholder="邮箱/手机号码/小米ID"/>
			</div>
			<p class="msg">{{ msg }}</p>
			<div class="wbk" :class="{wbkl:r,wbkr:r2}">
				<input type="password" v-model="mm" @focus="bs2()" @keyup.enter="Login()"  @input="bx2()" @blur="yz2()" placeholder="请输入密码"/>
			</div>
			<p class="msg">{{ msg2 }}</p>
			<p class="msg">{{ msgcw }}</p>
			<div class="yqtk">
				<div class="yq" @click="yq()" :class="{yq2:yqzt}">
					
				</div>
				<span>已阅读并同意小米帐号&nbsp;<a>用户协议</a>&nbsp;和&nbsp;<a>隐私政策</a></span>
			</div>
			<div @click="Login()" class="dlbt" :class="{dlbt2:dlbtzt}">
				登录
			</div>
		</form>
			<div class="dbwz">
				<a>手机号登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
				<a style="text-decoration: none;color: #0000008A;" href="reg.html">立即注册</a>&nbsp;&nbsp;|&nbsp;&nbsp;
				<a>忘记密码?</a>
			</div>
			<div class="dbwz2">
				<a>其他方式登录</a>
			</div>
		
		<img style="width: 10rem;" src="logimg/dlfs.png" >
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="text/javascript">
		let app=new Vue({
		    el:"#login",
		    data:{
		        yhm:"",
		        mm:"",
		        msg:"",
		        msg2:"",
				y:false,
				y2:false,
				r:false,
				r2:false,
				yqzt:false,
				dlbtzt:false,
				msgcw:""
		    },
		    methods:{
		        yz(){
		            if(this.yhm==""){
		                this.msg="请输入账号"
						this.y2=true
						this.y=false
						this.dlbtzt=false
		            }else{
		                this.msg=""
						this.y=false
						if(this.mm!=""&&this.yqzt==true){
							this.dlbtzt=true
						}else{
							this.dlbtzt=false
						}
		            }
		        },
				yz2(){
					if(this.mm==""){
					    this.msg2="请输入登录密码"
						this.r2=true
						this.r=false
						this.msgcw=""
						this.dlbtzt=false
					}else{
					    this.msg2=""
						this.r=false
						this.r2=false
						if(this.yhm!=""&&this.yqzt==true){
							this.dlbtzt=true
						}else{
							this.dlbtzt=false
						}
					}
				},
				bs(){
					this.y=true
				},
				bx(){
					if(this.yhm==""){
					    this.msg="请输入账号"
						this.y2=true
						this.y=false
						this.dlbtzt=false
					}else{
						this.y=true
						this.y2=false
						this.msg=""
						if(this.mm!=""&&this.yqzt==true){
							this.dlbtzt=true
						}else{
							this.dlbtzt=false
						}
					}
				},
				bs2(){
					this.r=true
					this.msgcw=""
				},
				bx2(){
					if(this.mm==""){
					    this.msg2="请输入登录密码"
						this.r2=true
						this.r=false
						this.msgcw=""
						this.dlbtzt=false
					}else{
						this.r=true
						this.r2=false
						this.msg2=""
						if(this.yhm!=""&&this.yqzt==true){
							this.dlbtzt=true
						}else{
							this.dlbtzt=false
						}
					}
				},
				yq(){
					this.yqzt=!this.yqzt
					if(this.mm!=""&&this.yhm!=""&&this.yqzt==true){
						this.dlbtzt=true
					}else{
						this.dlbtzt=false
					}
				},
				Login(){
					if(this.mm!=""&&this.yhm!=""&&this.yqzt==true){
							this.list="";
							let data={"userName":this.yhm,"userPwd":this.mm};
							axios
								.post('http://localhost:3000/users/Login',data)
								.then(res => {
									if(res.data.msg=="登录成功"){
										console.log(res.data.data[0]);
										document.cookie="userName="+res.data.data[0].userName;
										document.cookie="nickname="+res.data.data[0].nickname;
										document.cookie="userid="+res.data.data[0].id;
										document.cookie="userimg="+res.data.data[0].img;
										document.cookie="useremail="+res.data.data[0].Email;
										window.location.href="index.html";
									}else{
										this.r2=true
										this.msgcw="用户名或密码错误"
									}
								});
					}else{
						alert("请同意用户协议")
					}
				}
		    }
		});
		</script>
	</body>
</html>
